<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>魅蓝 Note6-魅族商城</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no,email=no"/>
    <meta name="_token" content="{{csrf_token()}}">
    <script>!function(d){var c=d.document;var a=c.documentElement;var b=d.devicePixelRatio;var f;function e(){var h=a.getBoundingClientRect().width,g;if(b===1){h=720}g=h/10;a.style.fontSize=g+"px"}if(b>2){b=3}else{if(b>1){b=2}else{b=1}}a.setAttribute("data-dpr",b);d.addEventListener("resize",function(){clearTimeout(f);f=setTimeout(e,200)},false);e()}(window);</script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script>
        layui.use('jquery',function () {
            var $ = layui.jquery;
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
        })
    </script>
    <link rel="stylesheet" href="/css/main-b0c41b5762.css"/>
</head>
<body>

<div class="app detail" id="pageDetail">

    <header id="header" class="header" >
        <a class="header-back" id="headerBack" data-mtype="mall_de_top_back">
            <i class="iconfont icon-goback"></i>
        </a>
        <div class="header-opacity trans" id="headerOpacity">
            <span>商品详情</span>
        </div>
        <a href="/" class="header-home" id="headerHome" data-mtype="mall_de_top_home">
            <i class="iconfont icon-home"></i>
        </a>
    </header>

    {{--<script>--}}
        {{--if (/MzmApp/.test(navigator.userAgent)) {--}}
            {{--document.getElementById('header').remove();--}}
        {{--}--}}
    {{--</script>--}}


    <main class="main" id="main">
        <!-- goods start -->
        <div class="goods" id="goods">
            <div class="swipe" id="prd-sliders">

                <div class="swipe-wrap">
                </div>
                <div class="layui-carousel" id="test1">
                    <div carousel-item>
                        @foreach($goods->goodsImages as $goodsImage)
                            <div>
                                <a href="/goods/{{$goodsImage->goods->id}}" data-mtype="mall_index_ba_1">
                                    <img  class="be-lazy" src="{{$goodsImage->src}}"
                                          data-src="3{{$goodsImage->src}}" alt=""/>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="poin">
                </div>
            </div>


            <div class="prod" id="prod">
                <div class="sanp-up" id="J_sanpUp">
                </div>

                <section class="prod-info">
                    <div class="prod-info-header">
                        <h1 class="vm-title">{{$goods->name}}</h1>
                    </div>
                    <div class="prod-info-price">
                        <div class="mod-price">
                            <small>¥{{$goods->price}}</small><span id="J_price" class="vm-money"></span>
                        </div>
                        <div class="mod-original" id="J_originalPrice" style="display:none">
                        </div>
                        <div class="mod-countdown" id="J_discountCountDown" style="display:none">
                        </div>
                    </div>
                    <div class="prod-info-message">
                        <p  class="active" >{{$goods->intro}}</p>
                    </div>
                </section>

                <section class="prod-service" id="J_prodService" data-ctrl="J_layerService" data-mtype="mall_de_msg_service">
                    <ul>
                        <li><i class="icon icon-service"></i>花呗分期</li>
                        <li><i class="icon icon-service"></i>百城速达</li>
                        <li><i class="icon icon-service"></i>顺丰包邮</li>
                        <li><i class="icon icon-service"></i>7天无理由退货</li>
                    </ul>
                    <i class="icon icon-enter" id="J_prodPromoEnter"></i>
                </section>

                <section class="prod-promo" id="J_prodPromo" data-ctrl="J_layerPromo" style="display:none;" data-mtype="mall_de_msg_coupon">
                    <div class="prod-promo-inner" id="J_promoInner">
                        <label>领券</label>
                    </div>
                    <i class="icon icon-enter" id="J_prodPromoEnter"></i>
                </section>

                <section class="prod-selected" id="J_prodSelected" data-ctrl="J_layerProps" data-mtype="mall_de_msg_package">
                    <label>选择</label>
                    <p>
                        <span class="vm-props" id="J_selectedProps"></span>
                        <span class="vm-quantity" id="J_selectedQuantity" style="display:none;">×1</span>
                    </p>
                    <i class="icon icon-enter" id="J_prodPromoEnter"></i>
                </section>

                <section class="prod-suda" id="J_prodSuda" data-ctrl="J_layerSuda" data-mtype="mall_de_msg_address">
                    <!--去掉百城判断-->
                    <div class="prod-suda-selector" id="J_sudaSelector"
                         data-url="//area.meizu.com/area/child/query/">
                        <label>配送</label>
                        <span id="J_siteText"></span>
                        <i class="icon icon-enter" id="J_prodPromoEnter"></i>
                    </div>
                    <div class="prod-suda-info" id="J_siteStatus" style="display:none;">
                    </div>
                    <!---->
                    <div class="prod-suda-supplier">
                        <p class="mod-bd">
                            本商品由<em>魅族</em>负责发货并提供售后服务
                        </p>
                    </div>
                </section>
                <section class="prod-addition">
                    <input type="hidden" id="servertime" value="1514720747236"/>
                </section>
            </div>
        </div>
        <!-- goods end -->
        <section class="detail-recommend" id="detailRecommend">
            <div class="detail-recommend-inline"  id="detailRecommendInline"></div>
        </section>
        <!-- content start -->
        <section class="content" id="content">
            <nav class="content-nav" id="contentNav">
                <a class="active" href="#description" data-mtype="mall_de_top_good_click">图文详情</a>
                <a href="#question" data-mtype="mall_de_top_parameter_click">常见问题</a>
            </nav>

            <div class="content-inner" id="contentInner">
                <div class="description" id="description">
                    <div class="container">
                        <article class="desc-pictures">

                            <img src="//openfile.meizu.com/group1/M00/01/F7/Cgbj0FmvxnqAZLI7AAHpuQQHh3k867.jpg"/>
                        </article>
                    </div>
                </div>
                <div class="question" id="question">
                    <div class="question-list">
                        <dl class="mod-item">
                            <dt class="vm-question">
                                新疆地区可以正常派送吗？
                            </dt>
                            <dd class="vm-answer">
                                亲爱的魅友您好，受安全管控影响，新疆省部分区域将派件延迟或无法派件，下单前请先咨询客服沟通。谢谢！
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </section>
        <!-- content start -->
    </main>

    <footer class="fixed-btm footer-summary">
        <div class="mod-action">
            <a class="vm-service" data-mtype="mall_de_buy1_ocs" style="display:none;" id="J_kefu"><i class="iconfont icon-kefu"></i><span>客服</span></a>
            <a class="vm-favorite" id="J_favorite" data-mtype="mall_de_favorite"><i class="iconfont icon-favorite"></i><span>收藏</span></a>
            <a class="vm-cart" href="/goodsCar" data-mtype="mall_de_cart"><i class="iconfont icon-cart"></i><span>购物车</span></a>
        </div>
        <button class="btn hide" id="J_btnAddCart" data-ctrl="J_addCart" type="button" data-mtype="mall_de_cart1">加入购物车</button>

        <button class="btn btn-danger " id="J_btnBuyNow" type="button" data-mtype="mall_de_buy1">立即购买</button>
    </footer>

    <div id="go-top" class="go-top">
        <span class="icon ico-gotop"></span>
    </div>

    <section class="layer layer-promo" id="J_layerPromo" style="display:none;">
        <div class="layer-cover">
        </div>
        <div class="layer-inner">
            <div class="layer-inner-hd">
                <h3>优惠券</h3>
                <a class="vm-close J_btnClose" data-ctrl="J_layerPromo"><i class="icon icon-close"></i></a>
            </div>
            <div class="layer-inner-bd">
                <div class="discount-coupon">
                    <dl id="J_discountCouponList">
                    </dl>
                </div>
            </div>
        </div>
        <div class="layer-footer footer-summary">
            <a class="btn J_btnClose" data-ctrl="J_layerPromo">确定</a>
        </div>
    </section>

    <section class="layer" id="J_layerService" style="display:none;">
        <div class="layer-cover">
        </div>
        <div class="layer-inner">
            <div class="layer-inner-hd">
                <h3>服务说明</h3>
                <a class="vm-close J_btnClose" data-ctrl="J_layerService"><i
                            class="icon icon-close"></i></a>
            </div>
            <div class="layer-inner-bd">
                <div class="service-explain">
                    <dl>
                        <dd class="service-explain-item">
                            <h5><i class="icon icon-baicheng"></i>百城速达</h5>

                            <p>全国105个城市，除特殊情况，当日17点前支付的订单，最迟次日送达。</p>
                        </dd>
                        <dd class="service-explain-item">
                            <h5><i class="icon icon-shunfeng"></i>顺丰包邮</h5>

                            <p>
                                该商品顺丰包邮，顺丰无法到达的地区会安排转寄其他快递。
                            </p>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="layer-footer footer-summary">
            <a class="btn J_btnClose" data-ctrl="J_layerService">确定</a>
        </div>
    </section>

    <section class="layer layer-props" id="J_layerProps" style="display: none">
        <div class="layer-cover">
        </div>
        <div class="layer-inner">
            <div id="property" class="property">
                <div class="property-inner" id="J_propertyInner">
                    @foreach($arr as $key=>$item)
                    <dl data-property="{{$key}}" class="property-sale">
                        <dt class="vm-metatit">{{$key}}</dt>

                        <dd class="clearfix">
                            @foreach($item as $goodsNorm)
                            <a data-value="{{$goodsNorm->id}}" class="prop"
                               data-mtype="mall_de_pa_2_1">{{$goodsNorm->name}}</a>
                             @endforeach
                        </dd>

                    </dl>
                    @endforeach
                    <div class="property-quantity">
                        <div class="vm-metatit">数量</div>
                        <div class="property-quantity-control">
                            <a title="减少" href="javascript:;" class="vm-minus check_num">-</a>
                            <span type="text" class="vm-quantity" id="J_quantity" data-value="1"
                                  data-max="100">1</span>
                            <a title="增加" href="javascript:;" class="vm-plus check_num">+</a>
                        </div>
                        <span id="J_Stock" class="vm-count"></span>
                    </div>
                </div>
            </div>
            <div class="summary">
                <div class="summary-pic">
                    <img id="J_summaryPicBooth" src="{{$goods->img}}"
                         width="80" height="80" alt="">
                </div>
                <div class="summary-info">
                    <div class="vm-price">
                        <span class="price">¥ <em id="J_summaryPrice"></em></span>
                        <span class="countdown" id="J_summaryDiscountCountDown">
                            </span>
                    </div>
                    <div class="vm-title" id="J_summaryName"></div>
                    <div class="vm-discount" id="J_summaryDiscount"></div>
                    <a class="vm-close J_btnClose" data-ctrl="J_layerProps" data-mtype="mall_de_pa_close"><i
                                class="icon icon-close"></i></a>
                </div>
            </div>
        </div>
        <div class="layer-footer footer-summary">
            <button class="btn hide" id="J_btnAddCartProps" data-mtype="mall_de_cart">加入购物车</button>
            <a class="btn btn-danger " id="J_btnBuyPropsEnter" data-mtype="mall_de_buy2">立即购买</a>
        </div>
    </section>

    <section class="layer-package" id="J_layerPackage" style="display:none;">
        <div class="layer-inner-hd">
            <div class="mod-hd">
                <a class="header-back J_btnClose" data-ctrl="J_layerPackage" title="关闭">
                    <i class="iconfont icon-goback"></i>
                </a>
                <div class="title">套餐选择</div>
            </div>
            <div class="mod-tab orient-h" id="J_packageTab">
            </div>
        </div>
        <div class="layer-inner-bd" id="J_packageContent">
            <div class="mod-bd" id="J_packageBody">
                <ul>
                </ul>
            </div>
        </div>
        <div class="layer-footer footer-summary">
            <div class="mod-total">
                合计: <small>¥ </small><span class="vm-money" id="J_totalPricePackage"></span>
            </div>
            <button class="btn btn-danger" id="J_packageEnter" data-ctrl="J_layerPackage" type="button">确定</button>
        </div>
    </section>
</div>

<div>新鲜水果速卖有限公司</div>
</body>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>

<script>
    layui.use(['jquery','layer'],function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        $("#J_prodSelected").click(function () {
            $("#J_layerProps").css('display','block');
        })

        $(".prop").click(function () {
            $(this).addClass("selected").siblings().removeClass("selected");
            sku = '';
            $(".selected").each(function () {
                sku += $(this).attr('data-value')+'|'
            })
            sku = sku.substr(0, sku.length - 1);
            $.ajax({
                url:"/goodsSku",
                type:"get",
                data:{"sku":sku},
                dataType:"json",
                success:function (msg) {
                    if (msg.error == 0 ){
                        $("#J_summaryPrice").text(msg.goodsSku.price);
                        var num = $('#J_quantity').text();
                        price = $("#J_summaryPrice").text();
                        $("#J_summaryPrice").text(price*num);
                        jiage = price;
                    }
                }
            })
        })

        $('.check_num').click(function () {
            if (jiage){
                tag = $(this).text();
                num = $('#J_quantity').text();
                if (tag == '+'){
                    num++;
                    $("#J_quantity").text(num);
                }else if(tag == '-' && num>1){
                    num--;
                    $("#J_quantity").text(num);
                }
                price = jiage*num;
                $("#J_summaryPrice").text(price);
            }

        })
        $('.icon-close').click(function () {
            $("#J_layerProps").css('display','none');
        })
        $('#J_btnBuyPropsEnter').click(function () {
            token ="{{\Auth::user()}}";
            if (!token){
                location.href = "/login";
            }
            allPrice = $("#J_summaryPrice").text();
            goods_id = {{$goods->id}}
                num = $('#J_quantity').text();
            $.ajax({
                url:"/goodsCar",
                type:"post",
                data:{"sku":sku,"goods_id":goods_id,"allPrice":allPrice,"num":num},
                dataType:"json",
                success:function (msg){
                    if (msg.error == 0 ){
                        layer.alert(msg.info, {icon: 6},function () {
                            $("#J_layerProps").css('display','none');
                        });

                    }
                }
            })
        })
        
    })
</script>
</html>

